<!--
 * @Author: 刘晟勇
 * @Date: 2021-10-21 11:06:00
 * @LastEditTime: 2021-10-21 11:12:37
 * @Description: 商品推荐组件
-->
<template>
  <section class="recommend">
    <div class="recommend-title">
      <van-divider :style="{ borderColor: '#ccc', padding: '0 16px' }"
        >{{ title }}</van-divider
      >
    </div>
    <div class="recommend-list">
      <div
        class="recommend-item"
        v-for="item in productRecommend"
        :key="item.id"
        @click="toProductDetail(item.id)"
      >
        <img :src="item.imageHost + item.mainImage" />
        <p>
          {{ item.name }}
        </p>
        <i>￥ {{ item.price }}</i>
      </div>
    </div>
  </section>
</template>

<script>
// 导入混入api方法
import { getProductRecommend } from "@/api/product-list";

export default {
  name: "ProductRecommend",
  props: {
    title: {
      type: String,
      default: "为你推荐",
    },
  },
  data() {
    return {
      productRecommend: [],
    };
  },
  created() {
    getProductRecommend((data) => {
      this.productRecommend = data;
    })
  },
  methods: {
    toProductDetail(id) {
      this.$router.push({
        name: 'product-detail',
        params: {
          id
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.recommend {
  margin-bottom: 100px;
  .recommend-title {
    background-color: #fff;
    padding: 20px 0;
    margin: 16px 0;
  }
  .recommend-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    background-color: #fff;

    .recommend-item {
      display: flex;
      flex-direction: column;
      width: 50%;
      padding: 20px;
      @include boxSizing;
      border-bottom: 1px solid #dcdcdc;

      &:nth-child(2n-1) {
        border-right: 1px solid #dcdcdc;
      }

      img {
        width: 100%;
        height: 290px;
        margin: 0 auto;
      }

      p {
        height: 60px;
        padding: 20px 0;
        font-size: 26px;
        line-height: 40px;
        color: #333;
        overflow: hidden;
      }

      i {
        font-style: normal;
        font-size: 32px;
        color: $red;
      }
    }
  }
}
</style>
